<template>
  <div>
    <div class="ssp">
      <div class="head" style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;text-align: left;">
				<h1>社会实践</h1>
			</div>
      <el-form ref="form" :model="user" :rules="rules" label-width="1px">
        <div class="left">
          <el-form-item v-for="(user,practiceId) in userList" :key="practiceId" prop="practice">
            发起单位
            <el-input class="test2" v-model="user.initiator" placeholder="输入发起单位"></el-input>
            地点
            <el-input class="test2" v-model="user.spot" placeholder="输入地点"></el-input>
            天数
            <el-input class="test3" v-model="user.days" placeholder="输入天数"></el-input>
            团队人数
            <el-input class="test3" v-model="user.size" placeholder="输入团队人数"></el-input>
            团内职务
            <el-input class="test1" v-model="user.job" placeholder="输入团内职务"></el-input>
            是否线上
            <el-input class="test3" v-model="user.online"  placeholder="输入状态"></el-input>
            是否获得奖励
            <el-input class="test3" v-model="user.award"  placeholder="输入状态"></el-input>
            奖励名称
            <el-input class="test2" v-model="user.award_name"  placeholder="输入奖励名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              @click="addModule()"
              >添加条目
            </el-button>
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="deleteModule()"
              >删除条目
            </el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" size="medium" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getInfo, updateSSPinfo} from "@/api/login";

export default {
  name: "update",
  data() {
    return {
      userList:[],
      user: {
        username:"",
        practiceId: "",
        initiator:"",
        spot:"",
        days:"",
        size:"",
        job:"",
        online:"",
        award:"",
        award_name:"",
      },

      // rules: {
      //   spot: [{ required: true, message: "请输入地点", trigger: "blur" }],
      //   level: [{ required: true, message: "请输入活动级别", trigger: "blur" }],
      //   role: [{ required: true, message: "请输入角色", trigger: "blur" }],
      //   name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      // },
    };
  },
  mounted() {
    getInfo().then((res) => {
      this.user.username = res.data.username;
    });
  },
  methods: {
    addModule() {
      this.user = {};
      this.userList.push(this.user);
    },
    deleteModule(user) {
      var index = this.userList.indexOf(user); //找到对应图标的下标
      this.userList.splice(this.userList.length - 1, 1);
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          //发起网络请求登录，如果登录成功，跳转到主页面
          //操作与login api联系
          updateSSPinfo(this.user.username,this.user.serviceId,this.user.date,this.user.workname,this.user.job,this.user.level).then(res =>{
            console.log(res.data.accessToken)
            setToken(res.data.accessToken)
          }).catch(() => {
            // 上传，
            this.loading = true
          })
        }
      })
    },

  },
}
</script>

<style scoped>
.update {
  padding: 20px;
}
.head{
  margin-left: 10px;
}
.test1{
  width: 200px !important;
}
.test2{
  width: 250px !important;
}
.test3{
  width: 150px !important;
}
.left{
  text-align: left;
  margin-left: 100px;
  margin-right: 50px;
}
.right{
  text-align: right;
  margin-right: 100px;
}
</style>